import 'package:flutter/material.dart';

void main() => runApp(MyApp());

///StatelessWidget : 无状态组件
class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('First Flutter Demo'),
        ),
        body: MyStateWidget(),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页"),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.apps),
              title: Text("应用"),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              title: Text("我的"),
            ),
          ],
        ),
      ),
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
    );
  }

}

///HomeContent
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(
        '你好，Flutter! HomeContent!',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 40.0,
          color: Colors.yellow,
        ),
      ),
    );
  }
}
///ImgHomeContent 图片
class ImgHomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        width: 300,
        height: 300,
        decoration: BoxDecoration(
          //填充
          color: Colors.yellow,
          borderRadius: BorderRadius.circular(150),
          image: DecorationImage(
            image: NetworkImage(
                "http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg",
            ),
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

/// 圆角图片
class Img2HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.asset("images/a.jpg",
            width: 300,
            height: 300,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

/// 列表
class ListHomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.wb_cloudy),
          title: Text("okok,this is my list widget!"),
          subtitle: Text("sub title"),
        ),
        Img2HomeContent(),
        ImgHomeContent(),
        Img2HomeContent(),
        ImgHomeContent(),
      ],
    );
  }
}

///-----
List<Widget> _getListWidget(){
  List<Widget> list = new List();
  for(var i=0; i<20; i++){
    list.add(ListTile(
      leading: Icon(Icons.wb_cloudy),
      title: Text("${i}okok,this is my list widget!"),
      subtitle: Text("sub title"),
    ));
  }
  return list;
}
///动态列表
class List2HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: _getListWidget(),
    );
  }
}

///使用ListView Builder
class ListBdHomeContent extends StatelessWidget {

  List<String> list;
  ListBdHomeContent(){
    list = new List();
    for(var i=0; i<20; i++){
      list.add("我是列表啊：${i}");
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      itemCount: this.list.length,
      itemBuilder: (context, index)  {
        return ListTile(
          leading: Icon(Icons.home),
          title: Text(this.list[index]),
          subtitle: Text("sub title"),
        );
      },
    );
  }
}

///Grid
class GridHomeContent extends StatelessWidget {

  List<Widget> list;
  GridHomeContent(){
    list = new List();
    for(var i=0; i<20; i++){
      list.add(
        Container(
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
               Image.network(
                "http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg",
                 fit: BoxFit.cover,
              ),
              Text("decoration${i}")
            ],
          ),
          decoration: BoxDecoration(
            color: Colors.lightBlueAccent,
          ),
        )
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return GridView.count(
      crossAxisCount: 2,  //侧轴数
      crossAxisSpacing: 8, //侧轴边距
      mainAxisSpacing: 8, //主轴边距
      childAspectRatio: 0.7, //宽度和高度的比例
      padding: EdgeInsets.all(10),
      children: this.list,
    );
  }
}

///Grid Builder
class GridBdHomeContent extends StatelessWidget {

  List<Widget> list;
  GridBdHomeContent(){
    list = new List();
    for(var i=0; i<20; i++){
      list.add(
        Container(
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
               Image.network(
                "http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg",
                 fit: BoxFit.cover,
              ),
              Text("decoration${i}")
            ],
          ),
          decoration: BoxDecoration(
            color: Colors.lightBlueAccent,
          ),
        )
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return GridView.builder(
      itemCount: this.list.length,
      itemBuilder: (context, index){
        return this.list[index];
      },
      padding: EdgeInsets.all(10),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,  //侧轴数
        crossAxisSpacing: 8, //侧轴边距
        mainAxisSpacing: 8, //主轴边距
        childAspectRatio: 0.7, //宽度和高度的比例
      ),
    );
  }
}

///row 布局= flex
class RowHomeContent extends StatelessWidget {

  List<Widget> list;
  RowHomeContent(){
    list = new List();
    for(var i=0; i<3; i++){
      list.add(
        Container(
          width: 100,
          alignment: Alignment.center,
          child: Text("decoration${i}"),
          decoration: BoxDecoration(
            color: Colors.lightBlueAccent,
          ),
        )
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(
            alignment: Alignment.center,
            child: Text("1/3"),
            decoration: BoxDecoration(
              color: Colors.lightBlueAccent,
            ),
          ),
        ),
        Expanded(
          flex: 2,
          child: Container(
            alignment: Alignment.center,
            child: Text("2/3"),
            decoration: BoxDecoration(
              color: Colors.amber,
            ),
          ),
        ),
      ],
    );
  }
}

///stack 组件，position
class StackContent extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return
      Container(
        width: 200,
        height: 200,
        child: Stack(
          children: <Widget>[
            Container(
              width: 200,
              height: 200,
              decoration: BoxDecoration(
                  color: Colors.yellow
              ),
            ),
            Align(
              alignment: Alignment(0,-0.5),
              child: Text("stack"),
            ),
          ],
        ),
      );

  }

}

///Ratio 按比例定义
class RatioContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: 300,
      child: AspectRatio(
        aspectRatio: 16 / 9, //宽高比
        child: Container(
          decoration: BoxDecoration(
            color: Colors.lightBlueAccent,
          ),
        ),
      ),
    );
  }
}

///Card
class CardContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      decoration: BoxDecoration(
        color: Colors.lightBlueAccent,
      ),
      child: Card(
        margin: EdgeInsets.all(10),
        child: ListTile(
          title: Text("谁谁谁"),
          subtitle: Text("高级工程师"),
        ),
      ),
    );
  }
}


///WrapContent 可换行
class MyButton extends StatelessWidget{
  String text;
  Function callBack;
  MyButton(this.text, {Function press}){
    this.callBack = press;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
      child: Text(this.text),
      textColor: Theme.of(context).primaryColor,
      onPressed: this.callBack,
    );
  }
}
class WrapContent extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Wrap(
      spacing: 10,
      alignment: WrapAlignment.spaceEvenly,
      runAlignment: WrapAlignment.center,
      children: <Widget>[
        MyButton("dfdfdf"),
        MyButton("qgqgdfdfdfdfdfdfdfdfdf"),
        MyButton("aa"),
        MyButton("dfdfdf"),
        MyButton("efe"),
        MyButton("aa"),
        MyButton("dfdfdf"),
        MyButton("efe"),
        MyButton("aa"),
        MyButton("dfdfdf"),
        MyButton("efe"),
      ],
    );
  }
}

///无状态组件
class MyLessStateWidge extends StatelessWidget{

  int count=0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Text("${this.count}"),
        MyButton("+",
          press: (){
            this.count ++;
            print(this.count);
        }),
      ],
    );
  }

}


///有状态组件
class MyStateWidget extends StatefulWidget{
  MyStateWidget({Key key}): super(key: key);
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyStateWidgeState();
  }
}
class MyStateWidgeState extends State<MyStateWidget>{
  int count=0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Chip(
          label: Text("你好${this.count}"),
        ),
        SizedBox(height: 20,),
        MyButton("+",
            press: (){
              setState(() {
                this.count++;
              });
              print(this.count);
            }),
      ],
    );
  }

}